<div class="form_header" style="margin-top: 10px;">
	{translate}Login information{/translate}	
</div>
<form id="userAccountForm">
<div>	
	<div style="width: 618px; border: 1px solid #BBB; border-bottom: none; padding: 0px 0px; float: left;">	
		<div class='field-row add-patient-row'>
			<div class='field-label add-patient-label' style='width: 140px;'>{translate}Username{/translate} *</div>
			<div class='field-value add-patient-value'>			
					<input id="username" name="user[username]" type="text" {if $user->get('username') neq ''} disabled="disabled"{/if} style="width: 180px;" value="{$user->get('username')}">
					<span style="font-weight: bold;">{translate}Note:{/translate}</span>{translate}Username can not be changed{/translate}												
				&nbsp;
			</div>
			<div style='clear: both;'></div>
		</div>
		<div class='field-row add-patient-row'>	
			<div class='field-label add-patient-label' style='width: 140px;'>{translate}Password{/translate} *</div>
			<div class='field-value add-patient-value' style='width: 360px; vertical-align: middle;'>
				<input id="password" type="password" name="user[password]" style="width: 180px;"
				{if $user->get('id') > 0}disabled="disabled"{/if}>
				{if $user->get('id') > 0}
					<input type="submit" value="{translate}Change password{/translate}" onclick="return togglePassword(this);">
				{/if}
				&nbsp;
			</div>				
						
			<div style='clear: both;'></div>
		</div>
		
		<div class='field-row add-patient-row'>	
			<div class='field-label add-patient-label' style='width: 140px;'>{translate}Re-type password{/translate} *</div>
			<div class='field-value add-patient-value' style='width: 190px;'>
				<input id="password_match" type="password" style="width: 180px;" {if $user->get('id') > 0}disabled="disabled"{/if}>
				&nbsp;
			</div>			
			<div style='clear: both;'></div>
		</div>
		
		<div class='field-row add-patient-row'>	
			<div class='field-label add-patient-label' style='width: 140px;'>{translate}Lock{/translate} *</div>
			<div class='field-value add-patient-value' style='width: 190px;'>
				<input type="radio" value="0" name="user[enable]"
				{if $user->get('enable') == 0} checked="checked"{/if}>{translate}Yes{/translate}  
				<input type="radio" value="1" name="user[enable]"
				{if ($user->get('enable') == 1 || $user->get('enable') == '')} checked="checked"{/if}>{translate}No{/translate}
				&nbsp;
			</div>			
			<div style='clear: both;'></div>
		</div>
	</div>
	
	<div style="width: 339px; height: 167px; border: 1px solid #BBB; border-left: none; padding: 0px 0px 0px 20px; float: left;">
		<div class='field-label add-patient-label' style='width: 100px; text-align: left;' >{translate}Role{/translate} *</div>
		<div style='clear: both;'></div>	
		<div class='field-value add-patient-value'>
			<select id="groups" size="8" name="user[role]" style="width: 150px; text-align: left;">
				{html_options options=$roles selected=$user->get('selected_group_ids')}
			</select>
		</div>		
	</div>			
	<div style='clear: both;'></div>	
</div>
</form>
{literal}
<script type="text/javascript">
	function togglePassword(el) {		
		if ($('#password').attr('disabled') == true) {
			$('#password').removeAttr('disabled');
			$('#password_match').removeAttr('disabled');			
			{/literal}
			el.value = "{translate}Don't change password{/translate}";
			{literal}
		}
		else {
			$('#password').attr('disabled', 'disabled');
			$('#password_match').attr('disabled', 'disabled');			
			{/literal}
			   el.value = "{translate}Change password{/translate}";
			{literal}
		}
		return false;
	}
</script>
{/literal}
